<template>
  <el-dialog
    class="ba-operate-dialog moreProcessPull"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
    draggable
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        料品:{{ processPull.single.goodsNo }}
      </div>
    </template>
    <!-- <el-scrollbar v-loading="baTable.form.loading" class="contentProcessPull"> -->
    <!-- <div class="ba-operate-form ba-add-form"> -->
    <el-row :gutter="5" style="height: 100%">
      <el-col :span="5">
        <SalseOutPlan />
      </el-col>
      <el-col :span="6">
        <Stock />
        <ActualStock />
        <SafeStock />
      </el-col>
      <el-col :span="6">
        <Process />
        <Purchase />
      </el-col>
      <el-col :span="7">
        <GoodsInprocess />
      </el-col>
    </el-row>
    <!-- </div> -->
    <!-- </el-scrollbar> -->
  </el-dialog>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { reactive, ref, inject, onMounted, watch, onBeforeUnmount } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormRules, ElTree, FormInstance } from "element-plus";
import GoodsInprocess from "./moreTables/GoodsInprocess.vue";
import SalseOutPlan from "./moreTables/SalseOutPlan.vue";
import Stock from "./moreTables/Stock.vue";
import ActualStock from "./moreTables/ActualStock.vue";
import SafeStock from "./moreTables/SafeStock.vue";
import Process from "./moreTables/Process.vue";
import Purchase from "./moreTables/Purchase.vue";

const filterText = ref("");
const treeRefSupplier = ref<InstanceType<typeof ElTree>>();
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const processPull = inject("processPull") as any;

interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});
const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();
const closeForm = () => {
  emits("update:modelValue", false);
};

type Option = {
  id: number;
  label: string;
  children: Option[];
};
const state: {
  siteOptions: Option[];
  warningOptions: anyObj[];
  deptOptions: any[];
  userOptions: any[];
  form: any;
} = reactive({
  siteOptions: [], //站点列表
  warningOptions: [], //告警策略列表
  deptOptions: [], //部门列表
  userOptions: [], //用户列表
  form: {},
});

onMounted(() => {});

watch(filterText, (val) => {
  treeRefSupplier.value!.filter(val);
});
defineExpose({});

onBeforeUnmount(() => {});
</script>
<style lang="scss">
// .el-scrollbar {
//   height: 500px;
//   overflow-y: auto;
// }

// .vertical-menus-scrollbar {
//   border: 1px solid #e5e6e7;
// }
// .tree-border {
//   width: 100%;
//   margin-top: 5px;
//   // background: #fff none;
//   border-radius: 4px;
// }

.moreProcessPull {
  width: 90vw;
  height: 90vh;
  margin: 50px auto 0 auto;
  padding-bottom: 0 !important;
  .el-dialog__body {
    height: 100% !important;
    padding: 0;
  }
}
.contentProcessPull {
  height: 80vh !important;
}
</style>
